<template>
  <div class="contain-body hdda-box">
    <Title></Title>
    <div class="search-contain-body">
      <el-form ref="form"
               inline
               :model="form"
               label-width="75px">
        <el-form-item>
          <div class="d-ib font-table"
               slot="label">姓名：</div>
          <el-input v-model="form.xms"></el-input>
        </el-form-item>

        <el-form-item>
          <div class="d-ib font-table"
               slot="label">证件号码：</div>
          <el-input v-model="form.zjhms"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search"
                     class="button-search"
                     @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div>
      <div class="pos-r">
        <Title msg="信息列表"></Title>
        <div class="pos-a" style="right: 0">
          <el-button @click="openOptions('','add')" type="primary" icon="el-icon-plus">
            新增
          </el-button>
        </div>
      </div>
      <CustomTable :columns="columns"
                   :table-data="tableData"
                   :pagination="pagination"
                   @pagination="paginationChange"
                   :total="total">
        <div slot="options"
             slot-scope="scope">
          <el-button @click="openOptions(scope,'details')" style="margin-left: 4px;" class="button-blur">详情</el-button>
          <el-button @click="openOptions(scope,'edit')" style="margin-left: 4px;" class="button-green">编辑</el-button>
          <el-button @click="deleteDate(scope)" style="margin-left: 4px;" class="button-red">删除</el-button>
        </div>
      </CustomTable>
    </div>

    <el-dialog width="819px"
               center
               class="custom-dialog-fill font-table"
               title="活动审批"
               :visible.sync="dialog.open">

      <div class="dialog-title"
           slot="title">
        {{ dialog.title }}
      </div>

      <div class="d-f jc-c">

        <el-form :disabled="flag" class="font-table" style="color: #000000;"ref="form" :model="form" label-width="75px">
          <!--<div class="mb-14">-->
            <!--活动信息-->
          <!--</div>-->
          <el-form-item>
            <div class="d-ib font-table" slot="label">姓名：</div>
            <el-input v-model="form.xm" style="width: 180px"></el-input>
            <div class="d-ib font-table"style="margin-left: 23px">会务证编号：</div>
            <el-input v-model="form.hweyxxHwzh" style="width: 180px"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" slot="label">国籍：</div>
            <!--<el-input v-model="form.gjdm" style="width: 180px"></el-input>-->
            <el-select v-model="form.gjdm" style="width: 180px" placeholder="请选择国籍" filterable>
              <el-option label="" value="">--请选择国籍--</el-option>
              <el-option
                      v-for="item in optionsGj"
                      :key="item.value"
                      :label="item.content"
                      :value="item.id">
              </el-option>
            </el-select>
            <div class="d-ib font-table" style="margin-left: 66px">民族：</div>
            <el-select v-model="form.mzdm" style="width: 180px" placeholder="请选择民族" filterable>
              <el-option label="" value="">--请选择民族--</el-option>
              <el-option
                      v-for="item in optionsMz"
                      :key="item.value"
                      :label="item.content"
                      :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" slot="label">票务编号：</div>
            <el-input v-model="form.gzxxPwbh" style="width: 180px"></el-input>
            <div class="d-ib font-table" style="margin-left: 53px">座位号：</div>
            <el-input v-model="form.gzxxZwh"style="width: 180px"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" slot="label">接待级别：</div>
            <el-input v-model="form.gzxxJdjb" style="width: 180px"></el-input>
            <div class="d-ib font-table" style="margin-left: 40px">背审结果：</div>
            <el-input v-model="form.bsjg"style="width: 180px"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table"
                 slot="label">购票时间：</div>
            <el-date-picker type="datetime" placeholder="选择日期" v-model="form.gzxxGpsj"
                            style="width: 180px" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            <div class="d-ib font-table"
                 slot="" style="margin-left:40px;">采集时间：</div>
            <el-date-picker type="datetime" placeholder="选择日期" v-model="form.cjsj"
                            style="width: 180px" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" slot="label">性别：</div>
            <!--<el-select v-model="form.xbdm" style="width: 180px" placeholder="请选择">-->
              <!--<el-option label="男" value="0"></el-option>-->
              <!--<el-option label="女" value="1"></el-option>-->
              <!--<el-option label="未知" value="2"></el-option>-->
            <!--</el-select>-->
            <el-select v-model="form.xbdm" style="width: 180px"  placeholder="请选择性别">
              <el-option label="" value="">--请选择性别--</el-option>
              <el-option
                      v-for="item in optionsXb"
                      :key="item.value"
                      :label="item.content"
                      :value="item.id">
              </el-option>
            </el-select>

            <div class="d-ib font-table" style="margin-left: 40px">证件代码：</div>
            <!--<el-select v-model="form.cyzjdm" style="width: 180px" placeholder="请选择">-->
              <!--<el-option label="身份证" value="0"></el-option>-->
              <!--<el-option label="警官证" value="1"></el-option>-->
              <!--<el-option label="未知" value="2"></el-option>-->
            <!--</el-select>-->
            <el-select v-model="form.cyzjdm" style="width: 180px" placeholder="请选择证件类型">
              <el-option label="" value="">--请选择证件类型--</el-option>
              <el-option
                      v-for="item in optionsZjdm"
                      :key="item.value"
                      :label="item.content"
                      :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" slot="label" >证件号码：</div>
            <el-input v-model="form.zjhm" style="width: 180px"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" style="margin-left: -22%">是否是会务人员：</div>
            <el-radio v-model="form.sfwhwry" label="0">是</el-radio>
            <el-radio v-model="form.sfwhwry" label="1">否</el-radio>

            <div class="d-ib font-table" style="margin-left: 25%">是否是观众：</div>
            <el-radio v-model="form.sfsgz" label="0">是</el-radio>
            <el-radio v-model="form.sfsgz" label="1">否</el-radio>

          </el-form-item>

          <el-form-item>
            <div class="d-ib font-table" style="margin-left: -16.5%">是否为外宾：</div>
            <el-radio v-model="form.gzxxSfwwb" label="0">是</el-radio>
            <el-radio v-model="form.gzxxSfwwb" label="1">否</el-radio>
            <div class="d-ib font-table" style="margin-left: 27.5%">是否背审：</div>
            <el-radio v-model="form.sfbs" label="0">是</el-radio>
            <el-radio v-model="form.sfbs" label="1">否</el-radio>

          </el-form-item>

          <el-form-item>
            <div class="d-ib font-table" style="margin-left: -19.5%">会务人员类型：</div>
            <el-radio v-model="form.hweyxxHwrylx" label="0">是</el-radio>
            <el-radio v-model="form.hweyxxHwrylx" label="1">否</el-radio>
            <div class="d-ib font-table" style="margin-left: 27.5%">票务类型：</div>
            <el-radio v-model="form.gzxxPwlx" label="0">是</el-radio>
            <el-radio v-model="form.gzxxPwlx" label="1">否</el-radio>
          </el-form-item>

        </el-form>

      </div>
      <div class="d-f jc-c">
        <div v-if="dialog.type=='details'">
          <el-button
                  class="button-cancel"
                  @click="dialog.open = false">关 闭
          </el-button>
        </div>
        <div v-if="dialog.type=='add'">
          <el-button
                  class="button-cancel"
                  @click="cancel()">取 消
          </el-button>
          <el-button
                  class="button-submit mr58"
                  @click="add()">确 定
          </el-button>
        </div>
        <div v-if="dialog.type=='edit'">
          <el-button
                  class="button-cancel"
                  @click="cancel()">取 消
          </el-button>
          <el-button
                  class="button-submit mr58"
                  @click="edit()">确 定
          </el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Title from "../../components/Title";
import CustomTable from "../../components/CustomTable";

export default {
  name: "chry",
  components: { Title, CustomTable },
  data () {
    return {
      optionsXb:{},
      optionsZjdm:{},
      optionsMz:{},
      optionsGj:{},
      flag:false,
      fileList: [],
      total: 0,
      pagination: {},

      dialog: {
        title: '新增方案',
        open: false,
        type: 'add',//'edit','add','details'
      },
      form: {
       xm: ''
      },
      tableData: [

      ],
      columns: [
        {
          key: 'xm',
          label: '姓名',
            width: '80px'
        },
        {
          key: 'zjhm',
          label: '证件号码'
        },
        // {
        //   key: 'xbdm',
        //   label: '性别',
        //     width: '80px'
        // },
        // {
        //   key: 'gjdm',
        //   label: '国籍',
        //     width: '80px'
        // },
        // {
        //   key: 'mzdm',
        //   label: '民族',
        //     width: '80px'
        //
        // },

        {
          key: 'gzxxPwbh',
          label: '票务编号'
        },
        {
          key: 'bsjg',
          label: '背审结果'
        },
        {
          key: 'cjsj',
          label: '采集时间',
            width:'200px'
        },
        {
          key: 'options',
          label: '操作',
            width: '240px',
          slot: true
        }
      ],

    }
  },
  mounted () {
      this.selectData();
  },
  methods: {
      selectData() {
          let optionsXb = new Array();
          let optionsZjdm = new Array();
          let optionsMz = new Array();
          let optionsGj = new Array();
          this.axios.post('t-dictionary/selectList', null
          ).then((res) => {
              if(res.code == '1'){
              for (var obj in res.data) {
                  if(res.data[obj].type == 'XB'){
                      optionsXb.push(res.data[obj]);
                  }
                  if(res.data[obj].type == 'ZJDM'){
                      optionsZjdm.push(res.data[obj]);
                  }
                  if(res.data[obj].type == 'MZ'){
                      optionsMz.push(res.data[obj]);
                  }
                  if(res.data[obj].type == 'GJ'){
                      optionsGj.push(res.data[obj]);
                  }
              }
              this.optionsXb = optionsXb;
              this.optionsZjdm = optionsZjdm;
              this.optionsMz = optionsMz;
              this.optionsGj = optionsGj;
          }
      }).catch((error) => {
              this.$message({
              message: '数据查询失败！'+error,
              type: 'error',
          });
      });
      },
    paginationChange (e) {
      this.pagination = e;
      this.getList(this.pagination.pageNum, this.pagination.pageSize);
    },
    getList (page, limit) {
      this.axios.post('/dxhd-chry/selectPage', {
        current: page,
        size: limit,
        entity: {
          xm: this.form.xms || '',
          zjhm: this.form.zjhms || ''
        }

      }).then((res) => {
        //列表
        this.tableData = res.data.records;
        this.total = res.data.total;
      }).catch((error) => {
        console.log(error);
      });
    },
    onSubmit () {
      this.getList(this.pagination.pageNum, this.pagination.pageSize);
    },
    openOptions (scope,params) {
        console.info(scope);
        this.dialog.type = params
        if (params == 'add') {
            this.flag=false;
            this.dialog.title = '新增'
            this.form={}
        }
        if (params == 'edit') {
            this.flag=false;
            this.dialog.title = '编辑'
            this.form=scope.data;
        }
        if (params == 'details') {
            this.flag=true;
            this.dialog.title = '详情'
            this.form=scope.data;
        }
        this.dialog.open = true
    },


      //根据id删除
      getDetail(id) {
          this.axios.post('/dxhd-chry/removeById', {
              xxbz: id || 4588988
          }).then((res) => {
              this.$message({
              type: 'success',
              message: '删除成功!'
          });
          this.onSubmit();
      }).catch((error) => {
        this.$message({
        type: 'info',
        message: '删除失败'
    });
          });
      },

      add(){
          this.axios.post('/dxhd-chry/save', this.form).then((res) => {
              this.$message({
              type: 'success',
              message: '保存成功!'
          });
          this.dialog.open = false
          this.onSubmit();
      }).catch((error) => {
              this.$message({
              type: 'info',
              message: '保存失败'
          });
      });
      },

      edit(){
          this.axios.post('/dxhd-chry/updateById', this.form).then((res) => {
              this.$message({
              type: 'success',
              message: '保存成功!'
          });
          this.dialog.open = false

      }).catch((error) => {
              this.$message({
              type: 'info',
              message: '保存失败'
          });
      });
      },

      deleteDate(row) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '关闭',
              type: ''
          }).then(() => {
              this.getDetail(row.data.xxbz);
      }).catch(() => {
              this.$message({
              type: 'info',
              message: '已取消删除'
          });
      });
      },
      cancel(){
          this.onSubmit();
          this.dialog.open = false;

      }


  }
}
</script>

<style lang="scss">
.hdda-box {
  .mb-14 {
    margin-bottom: 14px;
  }

  .mr111 {
    margin-right: 111px;
  }

  .mr58 {
    margin-right: 58px;
  }
  .input {
    width: 205px !important;
  }
}

</style>



